<!-- 确认核销-核销商品实际商品类型 -->
<template>
	<view class="pages">

		<view class="pages-title pl-30 pr-30 flex align-items-center">
			核销记录
		</view>
		<!-- 核销门店信息 -->
		<view class="store-info bgc-w mb-20">
			<!-- 核销门店 -->
			<view class="store-info-title row-box pl-30 pr-30 fs-lg">
				<view class="">
					核销门店
				</view>
				<view class="fc-0 out-1 fw-6">
					莱山万科御龙山店
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="pl-30 pr-30">
				<view class="fc-3 fw-9 fs-lg mt-20">
					订单信息
				</view>
				<!-- 商品信息 -->
				<view class="goods-ifon" :class="{'ac-goods-info':openGoods}">
					<p-order-goods-item-sm class="mt-20 mb-20" v-for="(item,index) in 5" :key="index" :info="{}" />
					<view class="goods-ifon-mack"></view>
				</view>

				<view class="row-box">
					<view class="">
						共 <text class="fc-warn ml-10 mr-10">39</text> 种 <text class="fc-warn ml-20 mr-10">39</text>
						件
					</view>
					<view class="">
						实收：<text class="fs-lg fw-9 fc-ac">¥37.00</text>
					</view>
				</view>

				<view class="open-goods fc-0 fcc mt-20" @click="openGoods=!openGoods">
					{{openGoods?'收起':'打开'}}
					<text class="iconfont fc-0 ml-10" :class="{'iconfont-top':openGoods}">&#xe685;</text>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="pl-30 pr-30">
				<u-divider text=""></u-divider>
				<view class="row-box  pt-20 pb-20 " v-for="(item ,index) in orderInfo" :key="index">
					<view class="fc-9 mr-30 order-list-title">
						{{item.title}}
					</view>
					<view class="fc-0">
						{{item.value}}
						<text class="iconfont ml-10" v-if="item.icon">&#xe636;</text>
					</view>
				</view>
			</view>

		</view>
		<!-- 客户信息 -->
		<p-customer-info></p-customer-info>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
		<view class="btn-ac">
			确认核销
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				openGoods: false
			};
		},
		computed: {
			orderInfo() {
				return [{
					title: "订单编号",
					value: "202503115764754465",
					icon: true
				}, {
					title: "下单时间",
					value: "2025/03/12 00:00:00"
				}, {
					title: "支付时间",
					value: "2025/03/12 00:00:00"
				}, {
					title: "提货时间",
					value: "2025/03/12 00:00:00"
				}, {
					title: "订单备注",
					value: "需要给我提供一个购物袋装起来"
				}, ]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-title {
		height: 96rpx;
	}

	.store-info {
		.store-info-title {
			height: 100rpx;
			border-bottom: 1rpx solid #ededed;
		}

		.goods-ifon {
			height: 300rpx;
			position: relative;
			overflow: hidden;

			.goods-ifon-mack {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				background-image: linear-gradient(0deg, #fff, rgba(0, 0, 0, 0));
				z-index: 1;
				opacity: 1;
			}
		}

		.ac-goods-info {
			height: auto;

			.goods-ifon-mack {
				opacity: 0;
			}
		}

		.open-goods {
			height: 55rpx;
			flex-direction: row;

			.iconfont {
				transform: rotate(0deg);
				transition: all 0.3s;
			}

			.iconfont-top {
				transform: rotate(180deg);
				transition: all 0.3s;
			}
		}

		.order-list-title {
			min-width: 100rpx;
			flex-shrink: 0;
		}
	}

	.btn-ac {
		width: 690rpx;
		margin: 60rpx auto;
	}
</style>